{extend name="banner/base" /}

{block name="nav"}
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a>轮播图</a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
{/block}

{block name="operate"}
<div class="layui-card-header">
    <button class="layui-btn layui-btn-danger" onclick="delAll()">
        <i class="layui-icon"></i>批量删除
    </button>
    <button class="layui-btn"
            onclick="xadmin.open('添加轮播图','/admin/banner/add?category_id={$categoryId}','','','full')">
        <i class="layui-icon"></i>添加轮播图
    </button>
</div>
{/block}

{block name="list"}
<div class="layui-card-body layui-table-body layui-table-main">
    <table class="layui-table layui-form">
        <colgroup>
            <col width="10">
            <col width="10">
            <col width="50">
            <col width="60">
            <col width="400">
            <col width=150">
            <col width="20">
            <col width="20">
        </colgroup>
        <thead>
        <tr>
            <th>
                <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
            </th>
            <th>ID</th>
            <th>项目编号</th>
            <th>点击图片修改</th>
            <th>标题</th>
            <th>更新时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="list" id="vo"}
        <tr>
            <td>
                <input type="checkbox" name="id" value="{$vo.id}" lay-skin="primary">
            </td>
            <td>{$vo.id}</td>
            <td>{$vo.item_number}</td>
            <td>
                <a href="javascript:;"
                   onclick="xadmin.open('{$vo.title}','/admin/banner/showImage?id={$vo.id}','','','full')"
                >
                    <img src="{$vo.image_url}" alt="{$vo.title}">
                </a>
            </td>
            <td>
                {if $vo.is_jump==1&&!empty($vo.hyperlink)}
                <a href="javascript:;"
                   onclick="xadmin.open('{$vo.title}','{$vo.hyperlink}','','','full')">
                    <span style="font-size: 6px;background-color: orangered;color: #FFFFFF;padding: 2px">超链接</span>
                    {$vo.title}
                </a>
                {else /}
                <a href="javascript:;"
                   onclick="xadmin.open('{$vo.title}','/admin/article/show?id={$vo.id}','','','full')">
                    {$vo.title}
                </a>
                {/if}
            </td>
            <td>{$vo.update_time}</td>
            <td class="td-status" style="width: 20px">
                {if $vo.status==1}
                <span class="layui-btn layui-btn-normal layui-btn-mini ">已启用</span>
                {else /}
                <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">已停用</span>
                {/if}
            </td>
            <td class="td-manage">
                <a onclick="article_stop(this,'{$vo.id}')" href="javascript:;" title="修改状态">
                    <i class="layui-icon">&#xe601;</i>
                </a>
                <a title="编辑" onclick="xadmin.open('{$vo.title}','/admin/article/edit?id={$vo.id}','','','full')"
                   href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" onclick="article_del(this,'{$vo.id}')" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
</div>
{/block}


{block name="js"}
<script>
    const url = {
        statusModUrl: '/admin/article/statusMod',
        delUrl: '/admin/article/del',
        delListUrl: '/admin/article/delList'
    }


    /*文章-停用*/
    function article_stop(obj, id) {
        layer.confirm('确认要修改状态吗？', function (index) {
            console.log(config.success)
            //发异步把用户状态进行更改
            $.post(url.statusModUrl, {id: id}, (res) => {
                if (res.status === config.success) {
                    if (res.result === config.off) {
                        $(obj).attr('title', '停用');
                        $(obj).find('i').html('&#xe62f;');
                        $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                        layer.msg('已停用!', {icon: 5, time: 1000});
                    } else {
                        $(obj).attr('title', '启用')
                        $(obj).find('i').html('&#xe601;');
                        $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                        layer.msg('已启用!', {icon: 1, time: 1000});
                    }
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            })
        });
    }

    /*单文章-删除*/
    function article_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $.post(url.delUrl, {id: id}, (res) => {
                if (res.status === config.success) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            })
        });
    }

    /*批量文章-删除*/
    function delAll(argument) {
        var ids = [];
        // 获取选中的id
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });
        var idsids = ids.toString();
        layer.confirm('确认要删除吗？' + ids, function (index) {
            //捉到所有被选中的，发异步进行删除
            $.post(url.delListUrl, {ids}, (res) => {
                if (res.status === config.success) {
                    layer.msg('删除成功', {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            })
        });
    }
</script>
{/block}
